<!DOCTYPE html>
<html>
<head>
#include("../../_common/head.html")
<title>在线列表</title>
</head>
<body class="pear-container">
    <div class="layui-panel query-panel /*查询面板*/">
        <form class="layui-form layui-row layui-col-space16" lay-filter="query-form" onsubmit="return false;">
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="pear-icon pear-icon-text"></i>
                    </div>
                    <input type="text" name="word" value="#(word??)" placeholder="模糊查询" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input id="startTime" type="text" name="startDate" value="#(startDate??)" placeholder="开始日期" autocomplete="off" class="layui-input select-time" data-type="datetime" value="#(startDate??)">
                </div>
            </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input id="endTime" type="text" name="endDate" value="#(endDate??)" placeholder="结束日期" autocomplete="off" class="layui-input select-time"  data-type="datetime" value="#(endDate??)">
                </div>
            </div>
        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
				<div class="layui-input-wrap">
                    <select name="status">
                        <option value="">-- 在线状态 --</option>
                        #DICTS(type="user_online_status")
                        #for(item : dicts)
                        <option value="#(item.value)"#if(status?? == item.value) selected#end>#(item.label)</option>
                        #end
                    </select>
                </div>
            </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <button type="button" class="pear-btn pear-btn-sm pear-btn-primary query-form-search">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
                <button type="button" class="pear-btn pear-btn-sm query-form-reset">
                    <i class="layui-icon layui-icon-refresh"></i> 重置
                </button>
            </div>
        </form>
    </div>
    <div class="layui-panel data-panel /*数据面板*/">
        <table id="data-table" lay-filter="data-table"></table>
    </div>

    <!-- 状态字段 -->
    <script type="text/html" id="bean-onlineStatus">
    <!-- #DICTS(type="user_online_status")#for(item : dicts) -->
    #[[{{# if(d.status == ']]##(item.value)#[[') { }}]]#
        <span class="#(item.listClass)">#(item.label)</span>
    #[[{{# } }}]]#
    <!-- #end -->
    </script>
    
    <!-- 创建时间 -->
    <script type="text/html" id="bean-startDatetime">
        {{layui.util.toDateString(d.startDatetime, "yyyy-MM-dd HH:mm:ss")}}
    </script>

    <!-- 最后访问时间 -->
    <script type="text/html" id="bean-activityDatetime">
        {{layui.util.toDateString(d.activityDatetime, "yyyy-MM-dd HH:mm:ss")}}
    </script>

#set(tableButtonsHtml = '')
#set(recordButtonsHtml = '')
#authPermissions('monitor:online:forceLogout')
    #set(tableButtonsHtml = tableButtonsHtml + '<a class="pear-btn pear-btn-danger pear-btn-xs" round lay-event="batchForceLogout"><i class="layui-icon layui-icon-close"></i>&nbsp;批量强退</a>')
#end
#authPermissions('monitor:online:forceLogout')
    #set(recordButtonsHtml = recordButtonsHtml + '{{# if(d.status == "ON"){ }}<a class="pear-btn pear-btn-danger pear-btn-xs" plain lay-event="forceLogout"><i class="layui-icon layui-icon-close"></i>&nbsp;强退</a>{{# } }}')
#end
#include("../../_common/data_table_template.html"
    , customTableButtons = tableButtonsHtml
    , customRecordButtons = recordButtonsHtml
)

#include("../../_common/foot.html")

<script type="text/javascript">
/*
 * 定义权限开关
 */
var RIGHTS = { NONAME: null // 无用，占个位
//#authPermissions('monitor:online:query')
    ,detail: true
//#end
};

/*
 * 模块操作路径
 */
var MODULE_PATH = "#CTX()/admin/monitor/online/";

/*
 * 默认弹窗大小
 */
var POPUP_AREA = ['720px', '95%'];

/*
 * 数据表的OPTIONS
 */
var OPTIONS = {
    elem: '#data-table',
    url: MODULE_PATH + "query",
    method: "post",
    request: {pageName: 'pageNumber', limitName: 'pageSize' },
    initSort: {"field": "startDatetime", "type": "desc"},
    page: true,
    height: 'full-95',
    toolbar: '#table-toolbar',
    defaultToolbar: [{title: "查询", layEvent: "toggle", icon: "layui-icon-search"}, 'filter'],
    size: 'sm',
    cols: [[
        {type: 'checkbox', align: 'center', width: 60},
        {field: 'id', align: 'left', minWidth: 280, width: '18%', sort: true, title: 'TOKEN'},
        {field: 'nickname', align: 'left', minWidth: 130, width: '10%', sort: true, title: '昵称'},
        {field: 'ip', align: 'left', width: 160, sort: true, title: 'IP地址'},
        {field: 'location', align: 'left', minWidth: 130, width: '10%', sort: true, title: '登录位置'},
        {field: 'browser', align: 'left', minWidth: 150, width: '15%', sort: true, title: '浏览器类型'},
        {field: 'os', align: 'left', minWidth: 130, width: '13%', sort: true, title: '操作系统'},
        {field: 'status', align: 'center', width: 100, sort: true, title: '在线状态', templet: '#bean-onlineStatus'},
        {field: 'startDatetime', align: 'center', width: 160, sort: true, title: '创建时间', templet: '#bean-startDatetime'},
        {field: 'activityDatetime', align: 'center', width: 160, sort: true, title: '最后访问时间', templet: '#bean-activityDatetime'},
        {toolbar: '#record-toolbar', align: 'left', minWidth: 100, title: '操作'}
    ]]
};
</script>

<script src="#CTX()/admin/js/query_form.js?_v=#VERSION()"></script>
<script src="#CTX()/admin/js/data_table.js?_v=#VERSION()"></script>

<script type="text/javascript">
/*
 * Layui相关脚本
 */
layui.use(['jquery', 'common'], () => {
    var $ = layui.jquery, common = layui.common; // 数据表格
    
    /*
     * 监听自定义事件
     */
    window.dataTable.handleEvent = (event, obj) => {
        if (event === 'forceLogout') {
        	window.dataTable.forceLogout(obj.data["id"]);
        }
        if (obj.event === 'batchForceLogout') {
            window.dataTable.batchForceLogout(obj);
        }
    }

    /*
     * 批量强退操作
     */
    window.dataTable.batchForceLogout = (obj) => {
        var checkIds = common.checkField(obj, 'id');
        
        if (checkIds === "") {
            layer.msg("未选中任何记录", {
                icon: 3,
                time: 1000
            });
            return false;
        }
        window.dataTable.forceLogout(checkIds);
    }
    
    /*
     * 确认强退操作
     */
    window.dataTable.forceLogout = (tokens) => {
        layer.confirm('确定要强退选择的记录？', {
            icon: 3,
            title: '提示'
        }, (index) => {
            layer.close(index);
            $.ajax({
                url: MODULE_PATH + "forceLogout",
                dataType: 'json',
                type: 'delete',
                data: {"tokens": tokens},
                beforeSend : () => {layer.load();}, // 防止重复操作
                complete : () => {layer.closeAll('loading');}, //解除防重复操作
                success: (result) => {
                    if (result.code == 200) {
                        // 提交 Ajax 成功后，静态更新表格中的数据
                        window.dataTable.refresh(); // 数据表格刷新
                    } else {
                        if(result.description){
                            // Ajax调用成功，但后台返回失败信息
                            layer.alert(result.description, {icon: 5});
                        } else {
                            layer.alert("操作失败！", {icon: 2});
                        }
                    }
                }
            })
        });
    }

    /*
     * 页面加载完成时加载表格数据
     */
    $(document).ready(() => {
        window.dataTable.search();
    });

});
</script>
</body>
</html>
